<template>
  <!-- 这里是商品列表页面 -->
  <el-card class="box-card">
    <el-row :gutter="30" type="flex" justify="center" style="flex-wrap: wrap">
      <el-col
        :span="4.8"
        v-for="item in commodityList"
        :key="item.id"
        style="margin-top: 1rem"
      >
        <!-- 商品区域 -->
        <el-card>
          <el-link
            :href="'/details?id=' + item.id"
            target="_blank"
            :underline="false"
          >
            <!-- 商品图片 -->
            <el-image
              class="goodsImg"
              :src="shoppingImg(item.commodityImagesId)"
            >
              <!-- 加载动画 -->
              <div slot="placeholder" class="image-slot">
                加载中<span class="dot">...</span>
              </div>
            </el-image>
            <!-- 商品标题 -->
            <h4 class="goodsTitle">
              {{ item.commodityName }}
            </h4>
          </el-link>
          <!-- 商品价格及购买人数 -->
          <p class="shoppingInfo">
            <span class="price"> <em>¥</em>{{ item.commodityPrices }} </span>
            <span class="sales">3.6w人购买</span>
          </p>
        </el-card>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
export default {
  data () {
    return {
      // 商品列表查询的参数
      queryInfo: {
        // 查询的参数
        query: '',
        // 当前的页数
        pageIndex: 1,
        // 当前每页显示几条数据
        pageSize: 1000,
        // 搜索框前选择框选中的名字
        queryType: 0
      },
      // 商品列表
      // commodityList: []
    }
  },
  created () {
    // 获取商品列表
    // this.getCommodityList()
  },
  props:{
    commodityList:{
      type:Array,
      require:true
    }
  },
  // 方法
  methods: {
    // 获取商品列表
    // async getCommodityList () {
    //   const { data: res } = await this.$http.get('Commodities', { params: this.queryInfo })
    //   if (res.meta.status !== 200) {
    //     // 获取商品列表失败
    //     return this.$message.error('商品列表获取失败！')
    //   } else {
    //     // 获取商品列表成功
    //     // 将返回的数据中的commodities商品列表赋值给commodityList
    //     this.commodityList = res.data.commodities
    //   }
    // },
    // 商品图片
    shoppingImg (imgIds) {
      // 截图第一张图片id
      const imgId = imgIds.split(',').slice(0, 1).toString()
      return `https://api.h1234.top/files/${imgId}`
    }
  }
}
</script>

<style scoped>
/* 包含所有商品的大卡片 */
.box-card {
  width: 111%;
}

/* 商品图片 */
.goodsImg {
  height: 200px;
  width: 200px;
  border-radius: 20px;
  margin: 10px;
}

/* 商品标题 */
.goodsTitle {
  overflow: hidden;
  width: 200px;
  font-size: 14px;
  color: #666666;
  font-weight: normal;
  height: 39px;
  margin-left: 10px;
}

/* 商品价格 */
.price {
  float: left;
  color: #f40;
  font-size: 20px;
  height: 22px;
  line-height: 22px;
  margin-left: 10px;
}

/* 购买人数 */
.sales {
  height: 26px;
  line-height: 26px;
  vertical-align: bottom;
  margin-left: 4px;
  color: #999;
  font-size: 14px;
}

/* ￥样式 */
em {
  font-style: normal;
  font-size: 12px;
  vertical-align: inherit;
}

/* 商品价格及购买人数 */
.shoppingInfo {
  margin-top: 10px;
}

/* 商品卡片内边距 */
.el-card >>> .el-card__body {
  padding: 0;
}
.el-card.is-always-shadow,
.el-card.is-hover-shadow:focus,
.el-card.is-hover-shadow:hover {
  box-shadow: none;
}
</style>